<template>
	<view class="time-box" v-if="view_show === true">
		<view class="time-container">
			<scroll-view class="time-content" scroll-y="true">
				<view class="time-content-week ">
					<view class="time-content-week-title f-wrap" :style="{ background: titlebackground, color: titlecolor }">
						<view class="time-content-week-title-box" v-for="(item, index) in weektitle" :key="index">{{ item }}</view>
					</view>
					<view class="time-content-week-list f-wrap">
						<view class="time-content-week-list-box" v-for="(item, index) in weekTime" :key="index" @tap="Timetap(item)" :style="{background:currentDayStyle('background',item),color:currentDayStyle('color',item)}" >{{ item }}</view>
					</view>
				</view>
				<view class="time-content-week-tisp f-wrap">
					<view class="week-tisp" :style="{ background: titlebackground }"></view>
					<text>今日事件</text>
				</view>
				<view style="width: 100%;" v-if="slot_show === true"><slot name="time"></slot></view>
				<view style="width: 100%;" v-else>
					<view class="steps">
						<view class="steps_item" v-for="(i, index) in infoList" :key="index">
							<view class="s_r">
								<view class="line" :style="{ backgroundColor: index != 0 ? titlebackground : 'rgba(0,0,0,0)' }"></view>
								<view class="index" :style="{ backgroundColor: titlebackground }">{{ index + 1 }}</view>
								<view class="line" :style="{ backgroundColor: index != infoList.length - 1 ? titlebackground : 'rgba(0,0,0,0)' }"></view>
							</view>
							<view class="s_l">
								<view class="info_item" @tap="topage(index)">
									<text>{{ i.date }}</text>
									<view >{{ i.info }}</view>
								</view>
							</view>
						</view>
					</view>
				</view> 
			</scroll-view>
			<view class="guanbi iconfont icon-guanbi" @tap="close"></view>
		</view>
	</view>
</template>

<script>
 const getDate= (time) =>{
	 const [time_day,month_one] = [
		 new Date(time.split("-")[0],time.split("-")[1],0).getDate(),
		 new Date(`${time.split("-")[0]}-${time.split("-")[1]}-01`).getDay()
		 ];
	 let month=[];
	 for(let i=0;i<time_day;i++){
		 if(i<month_one){
			month.push('');
		 };
	 };
	 for(let i=1;i<=time_day;i++){
	 	  month.push(i); 
	 };
	return month;
 };
 export default {
	name: 'week-time',
	props: {
		titlebackground: {
			type: String,
			default: '#f00'
		},
		titlecolor: {
			type: String,
			default: '#fff'
		},
		current_time: {
			type: String,
			default: ''
		},
		show: {
			type: Boolean,
			default:false
		},
		slot_show: {
			type: Boolean,
			default:false
		},
		infoList: {
			type: Array
		}
		
	},
	mounted: function() {
		this.inlet();
	},
	data: function() {
		return {
			weektitle: ['日', '一', '二', '三', '四', '五', '六'],
			weekTime: [],
			current_day:'',
			view_show:false
		};
	},
	watch:{
		current_time:function(val){
			this.inlet();
		},
		show:function(type){
			this.view_show = type;
		}
	},
	methods: {
		inlet:function(){
			this.getWeek(getDate(this.current_time));
			this.current_day=this.current_time.split("-")[2];
		},
		getWeek: function(time) {
			this.weekTime=time;
		},
		currentDayStyle:function(type,item){
			if(item == '') return;
			switch (type){
				case "background":
				return this.current_day==item?this.titlebackground:'';
				break;
				case "color":
				return this.current_day==item?'#fff':'';
				break;
				default:
				break;
			};
		},
		Timetap: function(event) {
			let today=`${this.current_time.split("-")[0]}-${this.current_time.split("-")[1]}-${event}`;
			this.$emit('Timetap', today);
		},
		topage:function(data){
			// console.log(data);
		},
		close:function(){
			this.view_show=false;
			this.$emit("close",this.view_show);
		}
	}
};
</script>

<style lang="scss" scoped>
// @import  url("../../static/font/iconfont.css");
.f-wrap {
	display: flex;
	flex-wrap: wrap;
}

.time-box {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	background-color: rgba(0, 0, 0, 0.4);
	overflow: hidden;
	.time-container{
		width: 600rpx;
		height: 1000rpx;
		margin: 0 auto;
		position: relative;
		.guanbi{
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 1150rpx;
			left: 45%;
			z-index: 10;
			color: #CCCCCC;
		}
		
	}
	.time-content {
		width: 600rpx;
		height: 1000rpx;
		position: relative;
		top: 100rpx;
		border-radius: 10rpx;
		// background: linear-gradient(left bottom,#622a8d,#cf47d9);
		background-color: #ffffff;
		overflow: hidden;
		.time-content-week {
			width: 100%;
			height: auto;
			// border: 1px solid;
			border-bottom: 1rpx dotted #ccc;
			margin-bottom: 10rpx;
			.time-content-week-title {
				width: 100%;
				height: 85rpx;
				.time-content-week-title-box {
					width: 85rpx;
					height: 85rpx;
					font-size: 20rpx;
					text-align: center;
					line-height: 85rpx;
				}
			}
			.time-content-week-list {
				width: 100%;
				min-height: 425rpx;
				padding-left: 6rpx;
				margin-top: 5rpx;
				padding-bottom: 5rpx;
				.time-content-week-list-box {
					width: 85rpx;
					height: 85rpx;
					font-size: 20rpx;
					text-align: center;
					line-height: 85rpx;
					border-radius: 10rpx;
				}
			}
		}
		.time-content-week-tisp {
			width: 100%;
			height: 40rpx;
			font-size: 26rpx;
			line-height: 30rpx;
			// border: 1rpx solid;
			.week-tisp {
				width: 10rpx;
				height: 30rpx;
				border-radius: 5rpx;
				margin-right: 5rpx;
				margin-left: 5rpx;
			}
		}
		.steps {
				display: flex;
				flex-direction: column;
		
				.steps_item {
					display: flex;
		
					.s_r {
						padding: 0 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
		
						.line {
							flex: 1;
							width: 5rpx;
							background-color: #f0f0f0;
						}
		
						.index {
							width: 40rpx;
							height: 40rpx;
							font-size: 12px;
							text-align: center;
							line-height: 40rpx;
							border-radius: 50rpx;
							background-color: #f0f0f0;
							color: #FFFFFF;
						}
					}
		
					.s_l {
						display: flex;
						flex-direction: column;
						padding: 20rpx 0;
		
						.info_item {
							background-color: #FFFFFF;
							margin-right: 30upx;
							border-radius: 10upx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							padding: 30upx;
							box-shadow: 0 10rpx 30rpx #ddd;
		
							text {
								font-size: 18px;
								font-weight: 500;
								color: rgba(51, 51, 51, 1);
								line-height: 25px;
							}
		
							view {
								font-size: 14px;
								font-weight: 400;
								color: rgba(102, 102, 102, 1);
								line-height: 20px;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
		
								flex-direction: column;
							}
						}
		
						.info_item:active {
							background-color: #f4f4f4;
						}
					}
				}
			}
	}
}
</style>
